<template>
  <DropComponent
    v-if="dropType == 1"
    v-bind="$attrs"
    active="active1"
    v-on="$listeners"
    customItemClass="customItemClass1"
  />
  <DropComponent
    v-else-if="dropType == 2"
    v-bind="$attrs"
    active="active2"
    v-on="$listeners"
    customClass="customClass2"
    customItemClass="customItemClass2"
  >
    <template v-slot:slot-container>
      <div class="Class2-left-line"></div>
      <div class="Class2-right-line"></div>
    </template>
  </DropComponent>
  <DropComponent
    v-else-if="dropType == 3"
    v-bind="$attrs"
    active="active3"
    v-on="$listeners"
    customItemClass="customItemClass3"
  />
  <DropComponent
    v-else-if="dropType == 4"
    v-bind="$attrs"
    active="active4"
    v-on="$listeners"
    customItemClass="customItemClass4"
  />
  <DropComponent
    v-else-if="dropType == 5"
    v-bind="$attrs"
    active="active5"
    v-on="$listeners"
    customItemClass="customItemClass5"
  />
  <DropComponent
    v-else-if="dropType == 6"
    v-bind="$attrs"
    active="active6"
    v-on="$listeners"
    customClass="customClass6"
    customItemClass="customItemClass6"
  >
    <template v-slot:slot-container>
      <div
        v-for="item in 4"
        :key="item + 'class6'"
        :class="`class6-rect class6-rect-${item}`"
      ></div>
    </template>
  </DropComponent>
  <DropComponent
    v-else-if="dropType == 7"
    v-bind="$attrs"
    active="active7"
    v-on="$listeners"
    customClass="customClass7"
    customItemClass="customItemClass7"
  >
    <template v-slot:slot-container>
      <div
        v-for="item in 4"
        :key="item + 'class7'"
        :class="`class7-rect class7-rect-${item}`"
      ></div>
      <div
        v-for="item in 4"
        :key="item + 'class7-small'"
        :class="`class7-small-rect class7-small-rect-${item}`"
      ></div>
    </template>
  </DropComponent>
  <DropComponent
    v-else-if="dropType == 8"
    v-bind="$attrs"
    active="active8"
    v-on="$listeners"
    customClass="customClass8"
    customItemClass="customItemClass8"
  />
  <DropComponent
    v-else-if="dropType == 9"
    v-bind="$attrs"
    active="active9"
    v-on="$listeners"
    customItemClass="customItemClass9"
  >
    <template v-slot:slot-container>
      <div class="Class9-top-line"></div>
      <div class="Class9-left-line"></div>
      <div
        v-for="item in 3"
        :key="item + 'class9'"
        :class="`class9-rect class9-rect-${item}`"
      ></div>
    </template>
  </DropComponent>
  <DropComponent
    v-else-if="dropType == 10"
    v-bind="$attrs"
    active="active10"
    v-on="$listeners"
    customClass="customClass10"
    customItemClass="customItemClass10"
  >
  </DropComponent>
  <DropComponent
    v-else-if="dropType == 11"
    v-bind="$attrs"
    active="active11"
    v-on="$listeners"
    customClass="customClass11"
    customItemClass="customItemClass11"
  >
    <template v-slot:slot-container>
      <div class="Class11-left-line"></div>
      <div class="Class11-right-line"></div>
    </template>
  </DropComponent>
</template>
<script>
import DropComponent from "./dropComponent";
export default {
  name: "data-v-segment",
  components: {
    DropComponent,
  },
  props: {
    dropType: {
      type: Number,
      default: 1,
    },
  },
};
</script>
<style src='./index.css' scoped></style>